<template>
  <div class="left_main flexC">
    <!------------------------ 动态监管 ------------------------------>
    <div class="flex1 flexC fuwu">
      <div class="title flex JustifyContentSB">
        <p>
          <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="">
          <span class="colorF font_s18">动态监管</span>
        </p>
        <div class="flex AlignItemsC" >
          <img style="height: 1.75rem;" src="../../assets/img/comprehensive/01.png" alt="">
          <p class="colorF Medium yuqing font_s14 cursor" @click="dailyInspect=true">日常巡查</p>
        </div>
      </div>
      <div class="flex1 content flexC">
        <p class="Regular font_s16 colorF textC font_s16 up_to_now">2019年至今</p>
        <ul class="flex1 flex textC AlignItemsC">
          <li class="flex1">
            <p>
              <span class="font_s40" style="color:#80E9A7;font-family:Acens;">19</span>
              <span class="font_s16 colorF">次</span>
            </p>
            <p class="font_s16 colorF">日常监管</p>
            <p class="font_s16 colorF" style="margin:-0.1rem;">(含双随机)</p>
          </li>
          <li class="flex1">
            <p>
              <span class="font_s40" style="color:#4DF7FF;font-family:Acens;">0</span>
              <span class="font_s16 colorF">次</span>
            </p>
            <p class="font_s16 colorF">专项监管</p>
          </li>
          <li class="flex1">
            <p>
              <span class="font_s40" style="color: #C2EE48;font-family:Acens;">0</span>
              <span class="font_s16 colorF">次</span>
            </p>
            <p class="font_s16 colorF">联合监管</p>
          </li>
        </ul>
      </div>
    </div>
    <!------------------------ 风险监管 ------------------------------>
    <div class="flex1 flexC fuwu">
      <div class="title flex JustifyContentSB">
        <p>
          <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="">
          <span class="colorF font_s18">风险监管</span>
        </p>
        <div class="flex AlignItemsC" >
            <p class="colorF Medium font_s14 xiangqings cursor" @click="riskDisposition=true">风险处置</p>
            <p class="colorF Medium font_s14 moxing cursor" @click="riskModal=true">风险模型</p>
            <p class="colorF Medium font_s14 xiangqing cursor" @click="standardView=true">标准查看</p>
        </div>
      </div>
      <ul class="flex1 content flex textC AlignItemsC">
        <li class="flex1 cursor" @click="riskValuationLevelA=true">
            <p class="assessment">
              <span class="font_s40" style="color:#80E9A7;font-family:Acens;">6</span>
              <span class="font_s16 colorF">家</span>
            </p>
            <p class="font_s16 colorF">风险评估等级A</p>
        </li>
        <li class="flex1 cursor" @click="riskValuationLevelB=true">
            <p class="assessment">
              <span class="font_s40" style="color: #4DF7FF;font-family:Acens;">9</span>
              <span class="font_s16 colorF">家</span>
            </p>
            <p class="font_s16 colorF">风险评估等级B</p>
        </li>
        <li class="flex1 cursor" @click="riskValuationLevelC=true">
            <p class="assessment">
              <span class="font_s40" style="color: #C2EE48;font-family:Acens;">0</span>
              <span class="font_s16 colorF">家</span>
            </p>
            <p class="font_s16 colorF">风险评估等级C</p>
        </li>
      </ul>
    </div>
    <!------------------------ 信用监管 ------------------------------>
    <div class="flex1 flexC fuwu">
      <div class="title flex JustifyContentSB">
        <p>
          <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt=""/>
          <span class="colorF font_s18">信用监管</span>
        </p>
        <div class="flex AlignItemsC" >
          <p class="colorF Medium font_s14 xiangqings cursor" @click="creditLevel=true">信用等级</p>
          <p class="colorF Medium font_s14 moxing cursor" @click="creditModal=true">信用模型</p>
          <p class="colorF Medium font_s14 xiangqing cursor" @click="standardViewCredit=true">标准查看</p>
        </div>
      </div>
     <ul class="flex1 content flex textC AlignItemsC">
       <li class="flex1 cursor" @click="creditValuationLevelA=true">
           <p class="assessment">
             <span class="font_s40" style="color: #80E9A7;font-family:Acens;">15</span>
             <span class="font_s16 colorF">家</span>
           </p>
           <p class="font_s16 colorF">信用评估等级A</p>
       </li>
       <li class="flex1 cursor" @click="creditValuationLevelB=true">
           <p class="assessment">
             <span class="font_s40" style="color: #4DF7FF;font-family:Acens;">0</span>
             <span class="font_s16 colorF">家</span>
           </p>
           <p class="font_s16 colorF">信用评估等级B</p>
       </li>
       <li class="flex1 cursor" @click="creditValuationLevelC=true">
           <p class="assessment">
             <span class="font_s40" style="color: #C2EE48;font-family:Acens;">0</span>
             <span class="font_s16 colorF">家</span>
           </p>
           <p class="font_s16 colorF">信用评估等级C</p>
       </li>
     </ul>
    </div>
    <!------------------------ 分类监管 ------------------------------>
    <div class="flex1 flexC fuwu">
      <div class="title flex JustifyContentSB">
        <p>
          <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt=""/>
          <span class="colorF font_s18">分类监管</span>
        </p>
        <div class="flex AlignItemsC" >
          <p class="colorF Medium font_s14 moxing cursor" @click="superviseFrequency=true">监管频次</p>
          <p class="colorF Medium font_s14 xiangqing cursor" @click="classifyModal=true">分类模型</p>
        </div>
      </div>
      <ul class="flex1 content flex textC JustifyContentSA AlignItemsC">
        <li class="classification_f cursor" @click="cemeteryLevel1=true">
           <p class="font_s24 classification">4家</p>
           <p class="font_s18 colorF">一级公墓</p>
           <p class="font_s18 colorF">(骨灰堂)</p>
        </li>
        <li class="classification_f cursor" @click="cemeteryLevel2=true">
           <p class="font_s24 classification">2家</p>
           <p class="font_s18 colorF">二级公墓</p>
            <p class="font_s18 colorF">(骨灰堂)</p>
        </li>
        <li class="classification_f cursor" @click="cemeteryLevelUndetermined=true">
          <p class="font_s24 classification">9家</p>
          <p class="font_s18 colorF">待评定等级公墓</p>
          <p class="font_s18 colorF">(骨灰堂)</p>
        </li>
      </ul>
    </div>

    <!------------------------- 组件调用 -------------------------->
    <ModalPolygon01 title="日常巡查" v-if="dailyInspect" @hidden="hiddenWindow(dailyInspect)">
      <DailyInspect></DailyInspect>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="风险处置清单" v-if="riskDisposition" @hidden="hiddenWindow(riskDisposition)">
      <RiskDisposition></RiskDisposition>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon title="浦东新区殡葬行业协同监管数据大平台风险模型表" v-if="standardView" @hidden="hiddenWindow(standardView)">
      <StandardView></StandardView>
    </ModalPolygon>
    <ModalPolygon01 title="风险评估等级A" v-if="riskValuationLevelA" @hidden="hiddenWindow(riskValuationLevelA)">
      <RiskValuationLevelA></RiskValuationLevelA>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="风险评估等级B" v-if="riskValuationLevelB" @hidden="hiddenWindow(riskValuationLevelB)">
      <RiskValuationLevelB></RiskValuationLevelB>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="风险评估等级C" v-if="riskValuationLevelC" @hidden="hiddenWindow(riskValuationLevelC)">
      <RiskValuationLevelC></RiskValuationLevelC>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="信用等级变化清单" v-if="creditLevel" @hidden="hiddenWindow(creditLevel)">
      <CreditLevel></CreditLevel>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon title="浦东新区殡葬行业协同监管数据大平台信用模型表" v-if="standardViewCredit" @hidden="hiddenWindow(standardViewCredit)">
      <StandardViewCredit></StandardViewCredit>
    </ModalPolygon>
    <ModalPolygon01 title="信用评估等级A" v-if="creditValuationLevelA" @hidden="hiddenWindow(creditValuationLevelA)">
      <CreditValuationLevelA></CreditValuationLevelA>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="信用评估等级B" v-if="creditValuationLevelB" @hidden="hiddenWindow(creditValuationLevelB)">
      <CreditValuationLevelB></CreditValuationLevelB>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="信用评估等级C" v-if="creditValuationLevelC" @hidden="hiddenWindow(creditValuationLevelC)">
      <CreditValuationLevelC></CreditValuationLevelC>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="一级公墓（骨灰堂）" v-if="cemeteryLevel1" @hidden="hiddenWindow(cemeteryLevel1)">
      <CemeteryLevel1></CemeteryLevel1>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="二级公墓（骨灰堂）" v-if="cemeteryLevel2" @hidden="hiddenWindow(cemeteryLevel2)">
      <CemeteryLevel2></CemeteryLevel2>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="待评定等级公墓（骨灰堂）" v-if="cemeteryLevelUndetermined" @hidden="hiddenWindow(cemeteryLevelUndetermined)">
      <CemeteryLevelUndetermined></CemeteryLevelUndetermined>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon title="分类模型" v-if="classifyModal" @hidden="hiddenWindow(classifyModal)">
      <ClassifyModal></ClassifyModal>
    </ModalPolygon>
    <ModalPolygon title="信用模型" v-if="creditModal" @hidden="hiddenWindow(creditModal)">
      <CreditModal></CreditModal>
    </ModalPolygon>
    <ModalPolygon title="风险模型" v-if="riskModal" @hidden="hiddenWindow(riskModal)">
      <RiskModal></RiskModal>
    </ModalPolygon>
    <!-- 分类监管频次 -->
    <Modal v-if="superviseFrequency" @hidden="hiddenWindow(superviseFrequency)">
      <SuperviseFrequency></SuperviseFrequency>
    </Modal>
  </div>
</template>
<script>
import ModalPolygon from '@/components/ModalPolygon.vue'
import ModalPolygon01 from '@/components/ModalPolygon01.vue'
import Modal from '@/components/Modal.vue'
import Pagination from '@/components/Pagination.vue'
import DailyInspect from './left/DailyInspect.vue'
import RiskDisposition from './left/RiskDisposition.vue'
import StandardView from './left/StandardView'
import RiskValuationLevelA from './left/RiskValuationLevelA'
import RiskValuationLevelB from './left/RiskValuationLevelB'
import RiskValuationLevelC from './left/RiskValuationLevelC'
import CreditLevel from './left/CreditLevel'
import StandardViewCredit from './left/StandardViewCredit'
import CreditValuationLevelA from './left/CreditValuationLevelA'
import CreditValuationLevelB from './left/CreditValuationLevelB'
import CreditValuationLevelC from './left/CreditValuationLevelC'
import CemeteryLevel1 from './left/CemeteryLevel1'
import CemeteryLevel2 from './left/CemeteryLevel2'
import CemeteryLevelUndetermined from './left/CemeteryLevelUndetermined'
import ClassifyModal from './left/ClassifyModal'
import SuperviseFrequency from './left/SuperviseFrequency'
import CreditModal from './left/CreditModal'
import RiskModal from './left/RiskModal'

export default {
  name: 'ComLeft',
  components: {
    ModalPolygon,
    ModalPolygon01,
    Modal,
    DailyInspect,
    Pagination,
    RiskDisposition,
    StandardView,
    RiskValuationLevelA,
    RiskValuationLevelB,
    RiskValuationLevelC,
    CreditLevel,
    StandardViewCredit,
    CreditValuationLevelA,
    CreditValuationLevelB,
    CreditValuationLevelC,
    CemeteryLevel1,
    CemeteryLevel2,
    CemeteryLevelUndetermined,
    ClassifyModal,
    SuperviseFrequency,
    CreditModal,
    RiskModal
  },
  data () {
    return {
      total: 150,
      dailyInspect: false,
      riskDisposition: false,
      standardView: false,
      riskValuationLevelA: false,
      riskValuationLevelB: false,
      riskValuationLevelC: false,
      creditLevel: false,
      standardViewCredit: false,
      creditValuationLevelA: false,
      creditValuationLevelB: false,
      creditValuationLevelC: false,
      cemeteryLevel1: false,
      cemeteryLevel2: false,
      cemeteryLevelUndetermined: false,
      classifyModal: false,
      superviseFrequency: false,
      creditModal: false,
      riskModal: false
    }
  },
  methods: {
    hiddenWindow: function (choose) {
      if (choose === this.dailyInspect) {
        this.dailyInspect = false
      }
      if (choose === this.riskDisposition) {
        this.riskDisposition = false
      }
      if (choose === this.standardView) {
        this.standardView = false
      }
      if (choose === this.riskValuationLevelA) {
        this.riskValuationLevelA = false
      }
      if (choose === this.riskValuationLevelB) {
        this.riskValuationLevelB = false
      }
      if (choose === this.riskValuationLevelC) {
        this.riskValuationLevelC = false
      }
      if (choose === this.creditLevel) {
        this.creditLevel = false
      }
      if (choose === this.standardViewCredit) {
        this.standardViewCredit = false
      }
      if (choose === this.creditValuationLevelA) {
        this.creditValuationLevelA = false
      }
      if (choose === this.creditValuationLevelB) {
        this.creditValuationLevelB = false
      }
      if (choose === this.creditValuationLevelC) {
        this.creditValuationLevelC = false
      }
      if (choose === this.cemeteryLevel1) {
        this.cemeteryLevel1 = false
      }
      if (choose === this.cemeteryLevel2) {
        this.cemeteryLevel2 = false
      }
      if (choose === this.cemeteryLevelUndetermined) {
        this.cemeteryLevelUndetermined = false
      }
      if (choose === this.classifyModal) {
        this.classifyModal = false
      }
      if (choose === this.superviseFrequency) {
        this.superviseFrequency = false
      }
      if (choose === this.creditModal) {
        this.creditModal = false
      }
      if (choose === this.riskModal) {
        this.riskModal = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .left_main{
    position: absolute;
    top: 15%;
    left:1rem;
    height: 80%;
    width: 25%;
    .fuwu{
      margin-bottom: 1rem;
      .title{
        line-height: 2.75rem;
        border-radius: 5px 5px 0 0;
        background: #556969;
        .yuqing{
          margin-left: 0.5rem;
          margin-right: 1rem;
          height: 1.75rem;
          padding: 0 0.5rem;
          line-height: 1.75rem;
          background: url(../../assets/img/comprehensive/02.png) no-repeat;
          background-size: 100% 100%;
        }
        .moxing{
          height: 1.75rem;
          padding: 0 0.5rem;
          line-height: 1.75rem;
          background: url(../../assets/img/comprehensive/03.png) no-repeat;
          background-size: 100% 100%;
        }
        .xiangqing{
          margin-left: 0.5rem;
          margin-right: 1rem;
          height: 1.75rem;
          padding: 0 0.5rem;
          line-height: 1.75rem;
          background: url(../../assets/img/comprehensive/04.png) no-repeat;
          background-size: 100% 100%;
        }
        .xiangqings{
          margin-right: 0.5rem;
          height: 1.75rem;
          padding: 0 0.5rem;
          line-height: 1.75rem;
          background: url(../../assets/img/comprehensive/04.png) no-repeat;
          background-size: 100% 100%;
        }
      }
      .content{
        background: #1C1F26;
        img{
          margin-right: 0.3rem
        }
        .up_to_now{
          width: 7.4375rem;
          margin: 0 auto;
          margin-top: 0.5rem;
          line-height: 1.4375rem;
          background: rgba($color: #5AD834, $alpha: 0.4)
          // background: #5AD834;
          // opacity:0.4;
        }
        .assessment{
          line-height: 6rem;
          background: url(../../assets/img/comprehensive/06.png) no-repeat;
          background-size: 100% 100%;
        }
        .classification_f{
          width: 7.6875rem;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .classification{
          width: 5.6875rem;
          line-height: 5.6875rem;
          background: url(../../assets/img/comprehensive/07.png) no-repeat;
          background-size: 100% 100%;
          color: #5AD834;
        }
      }
    }
  }
</style>
